<template>
  <div class="container">
    <ActionBar @search-click="handleSearchClick" />
    <Table
      :tableData="userStartProcessList"
      :loading="tableLoading"
      @detail-click="handleDetailClick"
    />
    <el-pagination
      class="pagination"
      layout="total, sizes, prev, pager, next, jumper"
      background
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="pageSize"
      :current-page="pageNum"
      :total="total"
      @size-change="handlePageSizeChange"
      @current-change="handlePageNumChange"
    />
    <Diglog :show.sync="dialogVisible" :data="url" />
  </div>
</template>

<script>
import ActionBar from './components/ActionBar'
import Table from './components/Table'
import Diglog from './components/Diglog'
import MyApplyService from '../../../service/my_apply'
import { loadingType } from '../../../common/js/constant'

export default {
  components: {
    ActionBar,
    Table,
    Diglog
  },
  data() {
    return {
      title: '',
      url: '',
      dialogVisible: false,
      form: {},
      userStartProcessList: []
    }
  },
  mounted() {
    this.getUserStartProcessList()
  },
  methods: {
    getUserStartProcessList() {
      const { pageNum, pageSize, form } = this
      const result = MyApplyService.getUserStartProcessList(
        pageNum,
        pageSize,
        form
      ).then(res => {
        const { list, total } = res.data
        this.total = total
        this.userStartProcessList = list
      })
      this.loadingAspect(result, loadingType.TABLE)
    },
    // 处理详情点击
    handleDetailClick(params) {
      const {
        processDefinitionId,
        processInstanceId
      } = params.historicProcessInstance

      MyApplyService.getProcessDetails(
        processDefinitionId,
        processInstanceId
      ).then(res => {
        this.url = res.message
        this.dialogVisible = true
      })
    },
    // 处理搜索点击事件
    handleSearchClick(form) {
      this.form = form
      this.getUserStartProcessList()
    },
    // 处理pageSize改变事件
    handlePageSizeChange(value) {
      this.pageSize = value
      this.getUserStartProcessList()
    },
    // 处理pageNum改变事件
    handlePageNumChange(value) {
      this.pageNum = value
      this.getUserStartProcessList()
    }
  }
}
</script>

<style lang="stylus" scoped>
.container
  width 100%
  height 100%
  padding 20px
  box-sizing border-box
  .pagination
    margin-top 20px
    text-align right
</style>
